<template>
  <div class="qs-container">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索输入框 -->
      <div>
        <span class="key_word">学科名称</span>
        <el-input v-model.trim="queryInfo.subjectName"></el-input>
        <span class="randoms_btn">
          <el-button @click="clearSearchName" size="small">清除</el-button>
          <el-button
            type="primary"
            size="small"
            @click="getSubjectsList(queryInfo)"
            >搜索</el-button
          >
        </span>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          class="add_btn"
          @click="showAddDialogVisbel = true"
          >新增学科</el-button
        >
      </div>

      <!-- 提示 -->
      <el-alert
        class="randoms_total"
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="subjectsList" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="200">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="200">
        </el-table-column>
        <el-table-column label="创建日期" width="160px">
          <template slot-scope="scope">{{
            scope.row.addDate | parseTimeByString
          }}</template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.isFrontDisplay == 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              @click="goDirectorys(scope.row)"
              type="text"
              size="medium"
              >学科分类</el-button
            >
            <el-button @click="goTags(scope.row)" type="text" size="medium"
              >学科标签</el-button
            >
            <el-button
              type="text"
              size="medium"
              @click="showAlterDialog(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="medium"
              @click="removeSubject(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="paging"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 修改对话框 -->
    <el-dialog
      title="修改学科"
      :visible.sync="showAlterDialogVisbel"
      width="20%"
    >
      <el-form :model="alterForm" ref="alterFormRef">
        <el-form-item
          label="学科名称"
          prop="subjectName"
          :rules="alterFormRules.subjectName"
        >
          <el-input
            type="text"
            v-model="alterForm.subjectName"
            autocomplete="off"
            class="alter_input"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" class="switch_label">
          <el-switch
            style="display: block"
            v-model="alterForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            class="alter_switch"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button @click="showAlterDialogVisbel = false">取 消</el-button>
        <el-button type="primary" @click="alterSubject">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增学科对话框 -->
    <el-dialog title="新增学科" :visible.sync="showAddDialogVisbel" width="20%">
      <el-form :model="addForm" ref="addFormRef">
        <el-form-item
          label="学科名称"
          prop="subjectName"
          :rules="addFormRules.subjectName"
        >
          <el-input
            type="text"
            v-model="addForm.subjectName"
            autocomplete="off"
            class="alter_input"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" class="switch_label">
          <el-switch
            style="display: block"
            v-model="addForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            class="alter_switch"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button @click="showAddDialogVisbel = false">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, update, remove, add } from '@/api/hmmm/subjects'
export default {
  data() {
    return {
      queryInfo: {
        subjectName: '',
        pagesize: 10,
        pages: 3,
        page: 1,
      },
      total: 0,
      subjectsList: [],
      showAlterDialogVisbel: false,
      alterForm: {
        id: 0,
        subjectName: '',
        isFrontDisplay: true,
      },
      alterFormRules: {
        subjectName: [{ required: true, message: '学科名称不能为空' }],
      },
      showAddDialogVisbel: false,
      addForm: {
        id: 0,
        subjectName: '',
        isFrontDisplay: true,
      },
      addFormRules: {
        subjectName: [{ required: true, message: '学科名称不能为空' }],
      },
    }
  },
  created() {
    this.getSubjectsList(this.queryInfo)
  },
  methods: {
    // 新增学科功能
    addSubject() {
      this.showAddDialogVisbel = true
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        const data = await add(this.addForm)
        // console.log(data);
        if (data.status !== 200) {
          return this.$message({
            message: '新增学科失败',
            type: 'warning',
          })
        }
        this.showAddDialogVisbel = false
        this.getSubjectsList()
        this.$message({
          message: '新增学科成功',
          type: 'success',
        })
      })
    },
    // 删除功能
    async removeSubject(row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该题组, 是否继续?',
        '提示',
        {
          type: 'warning',
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch((err) => err)
      if (confirmResult == 'confirm') {
        const data = await remove(row)
        if (data.status !== 200) {
          this.$message({
            type: 'error',
            message: '删除失败',
          })
        } else {
          this.getSubjectsList()
          this.$message({
            type: 'success',
            message: '删除成功',
          })
        }
      }
    },
    // 清空搜索输入框
    clearSearchName() {
      this.queryInfo.subjectName = ''
    },
    // 获取学科列表数据
    async getSubjectsList(queryInfo) {
      const data = await list(queryInfo)

      if (data.status !== 200) {
        return this.$message({
          message: '获取学科列表失败，请刷新',
          type: 'warning',
        })
      } else {
        const res = data.data
        this.total = res.counts
        this.subjectsList = res.items
        // console.log(this.subjectsList);
      }
    },
    // 给修改学科表单赋值
    async showAlterDialog(row) {
      // console.log(id);
      const data = await detail(row)
      if (data.status !== 200) {
        return this.$message({
          message: '查询学科名称失败，请重试',
          type: 'warning',
        })
      } else {
        this.alterForm.subjectName = data.data.subjectName
        data.data.isFrontDisplay == 1 ? true : false
        this.alterForm.id = data.data.id
      }
      this.showAlterDialogVisbel = true
    },
    // 修改学科
    alterSubject() {
      this.$refs.alterFormRef.validate(async (valid) => {
        if (!valid) return
        const data = await update(this.alterForm)
        if (data.status !== 200) {
          return this.$message({
            message: '修改学科信息失败',
            type: 'warning',
          })
        }
        this.showAlterDialogVisbel = false
        this.getSubjectsList()
        this.$message({
          message: '修改学科信息成功',
          type: 'success',
        })
      })
    },

    handleSizeChange(newSize) {
      this.queryInfo.page = 1
      this.queryInfo.pagesize = newSize
      // console.log(this.pagesize);
      this.getSubjectsList(this.queryInfo)
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      // console.log(`当前页: ${val}`);
      this.getSubjectsList(this.queryInfo)
    },
    // 跳转目录页面
    goDirectorys(row) {
      this.$router.push({
        name: 'subjects-directorys',
        query: {
          id: row.id,
          name: row.subjectName,
        },
      })
    },
    // 跳转标签页面
    goTags(row) {
      // console.log(row.subjectName);
      this.$router.push({
        name: 'subjects-tags',
        query: {
          id: row.id,
          name: row.subjectName,
        },
      })
    },
  },
}
</script>

<style scoped>
.qs-container {
  padding: 10px;
  box-sizing: border-box;
}
.el-input {
  width: 10%;
  height: 18px;
  margin: 0 10px;
}

.key_word {
  width: 80px;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px;
}

.randoms_total {
  margin: 15px 0;
}
.add_btn {
  float: right;
}
.paging {
  float: right;
  padding: 20px 0;
}
.el-dialog__footer {
  text-align: right !important;
}
.alter_input {
  width: 240px;
  height: 20px;
}
.switch_label {
  padding-left: 10px;
}
.alter_switch {
  padding-top: 5px;
}
.el-switch__core {
  margin-left: 10px;
}
</style>
